Wallpapers Océano

REFERENCIA:Pulsar-media

Cuando accedemos a una página lo que más llama la atención son los sliders o presentación de imágenes, cuando las transiciones son automáticas pueden llegar a cansar e incluso restar atención al contenido que en realidad es lo importante.

El que veremos hoy es a petición de EcuaLink se trata de un slider que contiene la plantilla Elios adaptada por Web2Feel y que podemos descargar en BTemplates

Para añadir el slider nos situamos justo antes de </head> y pegamos el contenido de este archivo Si ya estamos usando jQuery eliminamos la siguiente línea de lo que añadimos anteriormente.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js' type='text/javascript'/>

Guardamos los cambios y en plantilla de diseño editamos un gadget de HTML justo después de la cabecera. En su interior añadimos lo siguiente:

<div id='slidearea'>
<ul class='kwicks'>
<li class='kwik'>

<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>

<li class='kwik'>
<a href='#'>
<img alt="" class="slidimg" src="Url-imagen" style="width: 750px; height: 250px;" />
</a>

<div class='kwikmet rounded'>
<h2><a href='#' rel='bookmark' title=''>Título-contenido</a></h2>
<p>Texto-contenido</p>
</div>
</li>
</ul>

<div class='clear'/>
</div></div>

En Url-imagen añadimos la url de nuestra imagen de 750 x 256

En Texto-contenido es el espacio para incluir el texto que se muestra con fondo transparente. Igualmente haremos con Título- contenido.

Si deseamos suprimir la sombra del borde nos ubicamos en los estilos "slidearea" y eliminamos lo marcado en negrita, también podemos añadir otros tipos de borde.

#slidearea{
height: 250px;
overflow: hidden;
position: relative;
width:980px;
background:#fff;
border:5px solid #fff;
margin:20px 0px 20px 0px;
box-shadow: 0 0 10px #aaa;
-moz-box-shadow: 0 0 10px #aaa;
-webkit-box-shadow: 0 0 10px #aaa;
}

Los que utilizan jQuery en su blog pueden dar un aspecto diferente a los enlaces con Nudging.js el efecto es un sutil movimiento al pasar el puntero sobre el enlace.

Para añadirlo nos situamos en plantilla edición HTML y justo antes de </head> añadimos lo siguiente:

<script type='text/javascript'>

// <![CDATA[

$(document).ready(function() {

$('a.nudge').hover(function() { //mouse in

$(this).animate({ paddingLeft: '45px' }, 400);

}, function() { //mouse out

$(this).animate({ paddingLeft: '1px' }, 400);

});

});

//]]>

</script>

Si no estamos utilizando jQuery y es la primera vez que vamos a utilizarlo entonces también añadiremos justo antes del anterior:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>

Guardamos los cambios y queda crear los enlaces, si los añadimos en un gadget escogeremos HTML/Javascript



Url-enlace añadimos la url del sitio que vamos a enlazar.
Texto-enlace es el texto que visualizamos y hará de enlace.
Url-imagen añadiremos la url dela imagen a mostrar.
Url-icono-bullets es el lugar para añadir la url del icono o bullet.

Gracias por el vídeo Jose(Quintolandia)

Spooky Stickers

Trick or Trash

Litho Halloween

WebDesign

css creme

Lovely Halloween

Halloween Icon Pack

Halloween Icons

Esta es una entrada escrita cuando aún se sienten los nervios a flor de piel, son muchas emociones en poco espacio de tiempo y no dejan tiempo a reaccionar.
Cuando llegué a la sala Orange de Madrid me encontraba fuera de lugar, intentaba asociar a cada uno con su blog pero es difícil reconocernos por la imagen del perfil más aún si esa imagen no es la propia fotografía.

Hay que reconocer que el ambiente era propicio para entablar conversación pero una es más corta de lo que parece así que dejé que las cosas surgieran solas.

Comenzó la noche con vídeos sobre el 10º aniversario de 20Minutos y algo muy curioso la elaboración de Eneko la famosa estatuilla del autor con el mismo nombre que se le entrega a los ganadores de cada edición, tampoco faltó el vídeo del año pasado caras conocidas derrochando alegría y emoción. 20Minutos cuenta así la gala de los premios 20Blogs minuto a minuto.

El Mago Karim que es todo un personaje consiguió que las risas sonaran en la sala y entre ocurrencias y sus hábiles manos con juegos malabares de cartas la noche se fue relajando.

Comenzó la entrega de premios, es obvio que no esperaba encontrar allí a los 5.011 participantes pero se notaron ausencias de personas que me habría gustado mucho conocer pero, por diversas circunstancia no estaban allí.

22 galardones uno por categoría, otro para el blog más votado y el más esperado de la noche para el blog del año escogido por el jurado El horno de María la afortunada autora es Mayte Hortelano que estaba tan asombrada como feliz y no era para menos.

Creo que en el mismo orden que aparece en el listado oficial fueron nombrando a los ganadores de cada categoría, cuando me llamaron para recoger el premio a la categoría Ciencia Tecnología e Internet casi que no llego al escenario pero una vez allí... Vale, una vez allí estaba mucho más nerviosa.
En corto espacio de tiempo subo de nuevo a recoger el premio por votación popular más nervios, bromas por aquí y por allá el mago Karim me ofrece el micro para decir unas palabras y quiere ayudarme sujetando las estatuillas pero decide que mejor me ayuda con el cheque, me hizo reír y dije unas palabras de agradecimiento en las que seguramente no estuve acertada y más felicitaciones por parte de la organización y asistentes.

Los responsables de la organización tenían que hacer su trabajo y enviar lo antes posible entrevistas 1 - 2 fotografías y vídeo a la redacción, unas cuantas respuestas fueron suficientes, todos muy amables y serviciales, todo el mundo estaba contento daba igual si eras participante como si no.

Había barra libre y unos canapés deliciosos que dada la hora venían de maravilla, en el transcurso de la noche los que no se conocían se fueron presentando, no voy a citar nombres por si me olvido de alguien pero fue muy agradable ponerle cara a muchos bloggers.

A los que tomaron la iniciativa de acercarse a saludarme muchas gracias porque hoy puedo ver las fotos y al mismo tiempo recordar los abrazos. ¿Somos tímidos en persona eh? pensaba que era yo sola.

Nos regalaron a todos los premiados unos altavoces de la marca Philips para el iPod y a la salida un adaptador USB para conexión wifi con 15 euros de consumo gratuito, también se sorteó un viaje, la verdad que quedé gratamente sorprendida porque todo estaba muy bien organizado.

Lo que más me gustó fue la atención dispensada por la organización, no faltó nadie por acercarse a saludar y presentarse una maravilla la verdad.
El premio ¿qué puedo decir? fantástico, genial, oportuno, y todo gracias a esos 190 votos otorgados por vosotros, unos votos que no hay agradecimiento en el mundo para pagar.

Muchos ya están pensando en la edición del año que viene y animo a todo el mundo a presentarse porque la experiencia comienza desde el mismo momento que nos inscribimos donde tenemos la oportunidad de conocer maravillosas personas y blogs interesantes si a eso añadimos que podemos conocerlas personalmente en una noche estupenda el motivo es más que justificado.

No me canso de dar las gracias a todos los que me votaron y a los que sin poder dar su voto porque no participaban me estuvieron apoyando durante todo el concurso.

También quiero dar las gracias a José María Martín autor del blog 20minutos.es y responsable de participación, redes y comunidad de 20minutos.es por la atención y trato exquisito en todo momento.

A la organización en general y a todos los que hacen posible que cada año ese concurso siga celebrándose.

Gracias Oloman paisano, por darme ese sutil empujón para que participara, te debo un café y una charla pero esta vez de verdad sin excusa que valga.

Hay otra persona que tiene papel en esta película es alguien a quien admiro mucho no sólo porque es maestro de los maestros sino por su calidad humana, porque se entrega sin límites tratando de ayudar o como él dice de compartir.

Mi agradecimiento a JMiur de Vagabundia porque su blog es mi escuela particular y su persona un ejemplo a seguir.
Gracias por compartir tanto y de forma desinteresada.

Otras dos personas a las que tengo que dar gracias a diario con y sin concurso, son los causantes de esta entrada, los que sin saberlo me motivan para que siga manteniendo este blog. Ellos me escuchan siempre, a veces sonríen y cruzan miradas de complicidad como diciendo "Hoy toca ballita bloguera" pues si, hay batallita para rato y en el fondo os gusta que lo sé yo.
Gracias por estar siempre ahí en tiempos buenos y regulares, por hacer lo difícil sencillo. Por esos mil quinientos kilómetros para que pudiera asistir a la entrega de premios y vivir algo que me hacía mucha ilusión pero, para no forzar las cosas hacía como que no...
Por cuidar al fierecilla en mi ausencia y sentir la misma alegría que estaba sintiendo yo.
Gracias por darle emoción a mi vida, por estar y ser mis dos amores.

Y como lo prometido es deuda ahí va la camiseta que me regaló mi particular club de fans al hacerse oficial los resultados. Lo mejor fue la sorpresa, todos con camiseta y botella de cava en las manos haciendo la ola. Estáis locos pero os adoro.

No había sido un sueño.

The Inspiration Gallery es una de esas páginas que se guardan y por mucho tiempo que pase la seguimos conservando. Quizás muchos no vean nada de especial pero a mí me encanta lo retro y esta página tiene mucho de eso.

En  "borders" y "wallpaper" podemos ver diseños que nos recuerdan mucho las cenefas de hace años, aquel papel pintado que nuestras abuelas tenían en el salón.
La de usos que le daban a una misma tela que de cortinas pasaba a ser un cubrecamas y más tarde cojines para el sofá. Eso era reciclar y lo demás es tontería.

Por cierto, para decorar un footer quedaría de lujo.

Tamaño: 2,7 mb,
Formato: jpg, 1280 × 960 (todos los nombres incluidos)
Licencia: gratuito para uso personal
Referencia y descarga: Dezignus

Alessandra Ambrosio	Jaime Pressly	Melissa Joan Hart
Alyssa Milano	Jenna Elfman	Milla Jovovich
Amy Acker	Jennifer Aniston	Naomie Watts
Ashlee Simpson	Jessica Alba	Nicole Kidman
Brittany Murphy	Kate Winslet	Paz Vega
Charlize Theron	Kristin Kreuk	Penny Lancaster 02
Estefania Urdaneta	Lisa Snowdon	Pussycat Dolls 02
Giorgia Palmas	Lucy Pinder 02	Rosario Dawson
Hilary Duff	Mariah Carey	Sofia Vergara

Shadowbox es un visor para medios de comunicación, quizás nos suene más si decimos que se trata de una ventana modal donde podemos mostrar casi cualquier tipo de formato, imágenes, QuickTime, Windows Media Player, Flash, vídeo Flash, HTML y páginas web externas. Resulta muy elegante porque carece de marcos y puede adaptarse a cualquier diseño de blog.

Para utilizar Shadowbox debemos añadir a la plantilla shadowbox.js lo descargamos y lo alojamos en un servidor para obtener la url.

Paso 1º

En plantilla edición de HTML justo después de ]]></b:skin> añadimos lo siguiente:

<script src='url-archivo-shadowbox.js' type='text/javascript'/>

En url-archivo-shadowbox.js lo sustituimos por la url que obtenemos al alojar el archivo en nuestro alojamiento.

Paso 2º

Justo después añadimos:

<script type='text/javascript'>

Shadowbox.init();

</script>

Paso 3º

A continuación los estilos:

<style type='text/css'>
#sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;}
#sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;}
#sb-overlay{position:relative;height:100%;width:100%;}
#sb-wrapper{position:absolute;visibility:hidden;width:100px;}
#sb-wrapper-inner{position:relative;border:1px solid #303030;overflow:hidden;height:100px;}
#sb-body{position:relative;height:100%;}
#sb-body-inner{position:absolute;height:100%;width:100%;}
#sb-player.html{height:100%;overflow:auto;}
#sb-body img{border:none;}
#sb-loading{position:relative;height:100%;}
#sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;}
#sb-loading-inner span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDLVNr2Qo7RobaiBu1AMqqxS9fLutc80PSaurShMbJnZmj4BB39QKUYTS5VW_FEeOUjRMJ7cS2E7FJuXloM0jw0Xc0-URcOwk_FIkdk2UeQhCvoigZSX41PBf0kPEw1LdeZUf6/s1600/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
#sb-body,#sb-loading{background-color:#060606;}
#sb-title,#sb-info{position:relative;margin:0;padding:0;overflow:hidden;}
#sb-title,#sb-title-inner{height:26px;line-height:26px;}
#sb-title-inner{font-size:16px;}
#sb-info,#sb-info-inner{height:20px;line-height:20px;}
#sb-info-inner{font-size:12px;}
#sb-nav{float:right;height:16px;padding:2px 0;width:45%;}
#sb-nav a{display:block;float:right;height:16px;width:16px;margin-left:3px;cursor:pointer;background-repeat:no-repeat;}
#sb-nav-close{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAshPWM9Dtpb7bT0ecym_7mn5L9K-Rhc8Mu97lgKq9eN3VNfN1vIFKpzYJnDCGxQDSQVyffkf1VnO1pvpgSyoQ_O8PH1Y_SxBQdFZhgTON-ExchCcmB1PoeITMkVXtFLMJ57z9/s1600/close.p);}
#sb-nav-next{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg52IVziW_T7FFwuvr3-tRUDLuIeiePb_b_gRSiB9ZeS_inNtZA85J8102xqbg8bMyI-VgFQhBNmGIDaRWGiWcFBdWdKItf_4o0QXd7Dbe2FKZHAAATkWiwmhx6TGNv6mQkgtKH/s1600/next.png);}
#sb-nav-previous{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG64Rr4ErwFta3XNWv3rN2mHfPngbE_2pSpsZZ-xtna8fN2prwtW5Xoj6kmGgLumGW31TwVv1UwHCNzgTv-17PXLjcp_UJW6yYbQOOM1H_tdvni8SV5kKGXsvXt2sLTT8DiUEB/s1600/previous.png);}
#sb-nav-play{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBMgblJfPQNTt0VfbTNwy2ICJvbzTXb2tXYQ11fjNT_Htk3D2q-nlVb_S9mlYTWRISOItJeLEERP7OeV3NkXkzl5WC3GJrh_w6WHxAhpVVI0YCBibA_95U3BV-i18mNWPWbY4i/s1600/play.png);}
#sb-nav-pause{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWQDbDrw2UFfiPQi9TLl8RRsgkkmU5MOD_7APbGjITOBUUFrRhi7G7S8Cc5ofbanJMRfeuo2yG2fPtok8GK_K8zDHodjYjzRsgqX-spSUbpNWzPtVxn0Vj8MM0aAWAvIX_fBd/s1600/pause.png);}
#sb-counter{float:left;width:45%;}
#sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;}
#sb-counter a.sb-counter-current{text-decoration:underline;}
div.sb-message{font-size:12px;padding:10px;text-align:center;}
div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;}
</style>

Antes de seguir, comentar la opción de añadir shadowbox.js directamente a la plantilla, con ese paso evitamos alojar el archivo en un servidor externo.

Si optamos por añadirlo en la plantilla lo que haremos será copiar el contenido de este archivo y pegarlo tal y como se indica en el paso 1º es decir, justo después de ]]></b:skin> y nos olvidamos de añadir el archivo externo.

Imagen única

Click en imagen

<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura"/></a>

Si no queremos retocar la imagen para obtener la miniatura también podemos establecer la medida para mostrarla y utilizar la misma url. Esta última opción no es muy recomendable cuando se suben muchas imágenes al blog ya que al hacerlo de esa forma estamos cargando dos veces la misma imagen y a la larga notaremos que la carga es más lenta.

Con width establecemos anchura y con height altura

<a rel="shadowbox" title="Título" href="Url-imagen-grande"><img src="Url-miniatura" height="137" width="170" /></a>

Si retocamos las imágenes bastará con <img src="Url-imagen"/>

A lo largo de esta entrada encontraremos varias veces que el código para mostrar nuestra ventana modal dice "Texto o imagen"  quiere eso decir que podemos mostrar la ventana en enlaces de texto o imágenes.

Si queremos mostrar texto no hay mucha explicación escribimos el texto que hará de enlace y listo. Para mostrar una imagen añadiremos: <img src="Url-imagen"/>

Galería

Click en imagen

<div style="text-align: center;">
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
<a href="Url-imagen-grande"rel="shadowbox[DEMO1]"><img src="Url-miniatura" alt="" height="100" width="100" /> </a>
</div>

Procuraremos añadir todas las líneas seguidas dejando un espacio entre cada código que será la separación entre imágenes.

Cada vez que añadimos una galería le añadimos un nombre distinto, en el ejemplo "DEMO1"

YouTube

Click en imagen

El siguiente sería el código proporcionado por YouTube para un vídeo:

<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/M-QiPebU2F8?fs=1&amp;hl=es_ES"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/M-QiPebU2F8?fs=1&amp;hl=es_ES" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>

Esta sería la parte que debemos copiar del código proporcionado por YouTube y pegarla en nuestro código M-QiPebU2F8

Y lo mostraríamos  así:

<a rel="shadowbox;width=405;height=340;" title="YouTube" href="http://www.youtube.com/v/M-QiPebU2F8&amp;rel=0&amp;autoplay=1">Texto o imagen</a>

Vimeo

Click en imagen

<a rel="shadowbox;width=405;height=340;" title="Vimeo" href="http://vimeo.com/moogaloop.swf?clip_id=13536006&amp;autoplay=1">Texto o imagen</a>

En color rojo la id el vídeo de Vimeo que necesitamos copiar y pegar en nuestro código.

Google

Click en imagen

<a href="http://video.google.com/googleplayer.swf?docid=8373165428322827115&autoplay=1&hl=es&fs=true" title="Video Google" rel="shadowbox;width=405;height=340">Texto o imagen</a>

Animación

Click en imagen

<a rel="shadowbox;width=400;height=300" title="Título" href="Url-archivo-.swf">Texto o imagen</a>

Página externa

 Click en imagen

<a rel="shadowbox;width=900;height=300" title="Página externa" href="Url-página">Texto o imagen</a>